<template>
  <div class="c-ut6ojt">
    <Loading :loading="loading">
      <NavBar>
        <template slot="content">
          <div>{{ yearMonth }}出单报表</div>
        </template>
      </NavBar>
      <div class="c-tzrmnb">
        <div class="c-tzrmnb-list" v-for="(item, index) in list" :key="index">
          <div class="c-tzrmnb-list-up">
            <div class="flex-row flex-align-center">
              <div class="c-tzrmnb-list-up-title">{{ item.agencyComName }}</div>
              <div @click="handleClick(item, index)">
                <van-icon name="arrow-down" v-show="item.isShow" />
                <van-icon name="arrow-up" v-show="!item.isShow" />
              </div>
            </div>
            <div class="flex-row flex-align-center" v-show="item.isShow">
              <div class="c-tzrmnb-list-up-text">
                新增保费{{ item.agencyAnnualPrem }}元
              </div>
              <div class="c-tzrmnb-list-up-text">
                预估收入{{ item.agencyIncome }}元
              </div>
            </div>
          </div>
          <div
            class="c-tzrmnb-list-down flex-row flex-align-center"
            v-for="ele in item.productList"
            :key="ele.index"
            v-show="item.isShow"
          >
            <div class="c-tzrmnb-list-down-img">
              <img src="../img/icon.png" />
            </div>
            <div>
              <div class="c-tzrmnb-list-down-title">{{ ele.productName }}</div>
              <div class="flex-row flex-align-center">
                <div class="c-tzrmnb-list-down-text">
                  {{ ele.policyCount }}件
                </div>
                <div class="c-tzrmnb-list-down-text">
                  累计保费{{ ele.totalPrem }}元
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </Loading>
  </div>
</template>
<script>
import NavBar from '@/components/h5header'
import API from '@/services/h5/my'
import Loading from '@/components/data-loading'
export default {
  components: { NavBar, Loading },
  data() {
    return {
      yearMonth: '',
      list: [],
      loading: false
    }
  },
  async created() {
    this.loading = true
    await this.init()
    await this.getData()
    await Promise.resolve().then(() => {
      this.loading = false
    })
  },
  methods: {
    init() {
      let yearMonth = this.$route.params.yearMonth.split('-')
      this.yearMonth = yearMonth[0] + '年' + Number(yearMonth[1]) + '月'
    },
    async getData() {
      let params = {
        yearMonth: this.$route.params.yearMonth
      }
      let res = await API.getIncomeMonthReport(params)
      if (res.data && res.data.code === 1000) {
        let list = []
        res.data.data.map(item => {
          let obj = {
            ...item,
            isShow: true
          }
          list.push(obj)
        })
        console.log(list)
        this.list = list
      }
    },
    handleClick(item, index) {
      this.list[index].isShow = !item.isShow
    }
  }
}
</script>
<style lang="less" scoped>
.c-ut6ojt {
  height: 100vh;
  background-color: #fafafa;
  font-size: 16px;
}
.c-tzrmnb-list-up {
  padding: 15px;
  &-title {
    font-size: 18px;
    font-weight: bold;
    color: #333;
    margin-right: 15px;
  }
  &-text {
    font-size: 15px;
    color: #999;
    margin-top: 10px;
    &:last-child {
      margin-left: 15px;
    }
  }
}
.c-tzrmnb-list-down {
  background: #fff;
  padding: 15px;
  border-bottom: 0.5px solid #e5e5e5;
  &:last-child {
    border-bottom: none;
  }
  &-img {
    margin-right: 15px;
    img {
      width: 50px;
      height: 50px;
    }
  }
  &-title {
    font-size: 19px;
    color: #333;
    font-weight: bold;
  }
  &-text {
    font-size: 15px;
    color: #999;
    margin-top: 10px;
    &:last-child {
      margin-left: 15px;
    }
  }
}
</style>
